<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="tag" tagdir="/WEB-INF/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<tag:head title="热门图书榜" ctx="${ctx}">
	<link href="${ctx}/assets/css/bootstrap/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet">
	<link href="${ctx}/assets/css/staff/staff_book_search/staff_book_search.css" rel="stylesheet">	<!-- 该页面特定的样式 -->
</tag:head>

<tag:body>
	<!-- 左 上 导航 -->
	<tag:nav ctx="${ctx}"></tag:nav>

	<!-- page content -->
	<div class="right_col" role="main">
		<div class="">
			<div class="clearfix"></div>

			<div class="row">
				<div class="col-md-12 col-sm-12 col-xs-12">
					<div class="x_panel">
						<div class="x_title">
							<h2>图书检索</h2>
							<div class="clearfix"></div>
						</div>
						<div class="x_content">
							<form action="${ctx}/staff/bookSearch" method="post">
								<div class="col-sm-2">
									<select class="form-control">
										<option value="0" selected>书名</option>
										<option value="1">作者</option>
									</select>
								</div>
								<div class="col-sm-2">
									<select class="form-control" id="bookClass" name="bookClass">
										<c:forEach var="bookClass" items="${requestScope.bookClasses}">
											<option value="${bookClass.bookClassId}">${bookClass.name}</option>
										</c:forEach>
									</select>
								</div>
								<div class="col-sm-2">
									<select class="form-control" name="type">
										<option value="0" selected>精确查询</option>
										<option value="1">模糊查询</option>
									</select>
								</div>
								<div class="col-md-5 col-sm-5 col-xs-5 form-group pull-left top_search">
									<div class="input-group">
										<input type="text" class="form-control" name="bookName" autocomplete="off" placeholder="请输入关键字">
										<span class="input-group-btn">
                 				   			  <button id="search" class="btn btn-default" type="button"><i class="fa fa-search">搜索</i></button>
                 					  	</span>
										<ul id="hotSearch" class="dropdown-menu dropdown-menu-right" role="menu">
											<a href="hotKeyPage" class="">查看完整热搜榜»</a>
											<c:forEach var="search" varStatus="idx" items="${requestScope.searchs}" end="9">
												<c:choose>
													<c:when test="${idx.index <= 2}">
														<li><a href="#" onclick="toSearchByHotKey(this)"><span class="badge bg-red">${idx.index + 1}</span>${search.searchKey}</a></li>
													</c:when>
													<c:otherwise>
														<li><a href="#" onclick="toSearchByHotKey(this)"><span class="badge">${idx.index + 1}</span>${search.searchKey}</a></li>
													</c:otherwise>
												</c:choose>
											</c:forEach>
										</ul>
										<ul id="matchSearch" class="dropdown-menu dropdown-menu-right" role="menu"></ul>
									</div>
								</div>
							</form>
							<c:choose>
								<c:when test="${fn:length(requestScope.hotBooks) == 0}">
									<div class="alert alert-warning">
										<h4><i class="fa fa-warning"></i>排行榜为空</h4>
									</div>
								</c:when>
								<c:otherwise>
									<table id="datatable-keytable" class="table table-striped table-bordered">
										<thead>
										<tr>
											<th width="5%">排名</th>
											<th width="25%">图书名</th>
											<th width="5%">类别</th>
											<th width="15%">评分</th>
											<th width="5%">封面图</th>
											<th width="15%">图书热度</th>
										</tr>
										</thead>

										<tbody>
											<c:forEach items="${requestScope.hotBooks}" var="book" varStatus="idx" end="50">
											<tr>
												<td>${idx.index + 1}</td>
												<td>
													<c:if test="${idx.index <= 2}"><span class="label label-warning pull-right">热</span></c:if>
													<a href="#" onclick="bookInfo('${book.bookId}')">《${book.name}》</a>
												</td>
												<td>${book.bookClass.name}</td>
												<td>
													<c:choose>
														<c:when test="${book.grade == null}">暂无评分</c:when>
														<c:otherwise>
															<c:forEach begin="1" end="${book.grade}">
																<i class="fa fa-star"></i>
															</c:forEach>
															${book.grade}分
														</c:otherwise>
													</c:choose>
												</td>
												<td width="5%"><a href="#" class="btn btn-info btn-xs" data-toggle='modal' data-target='.bigImage' onclick="bigImage('${ctx}/${book.bookImage}')">
													查看大图</a>
												</td>
												<td>
													<div class="progress progress_sm">
														<div class="progress-bar bg-green" role="progressbar"  aria-valuemin="0" aria-valuemax="100" style="width: ${book.borrowTimes/requestScope.sumCount * 100}%;">
															<span class="sr-only"></span>
														</div>
													</div>
												</td>
											</tr>
										</c:forEach>
										</tbody>
									</table>
								</c:otherwise>
							</c:choose>

						</div>

					</div>
				</div>

			</div>
			<div class="emptyRow"></div>


		</div>
	</div>
	<!-- /page content -->

	<!-- footer content -->
	<tag:footer></tag:footer>
</tag:body>
<!-- javascript -->
<tag:javascript ctx="${ctx}">
	<script src="${ctx}/assets/js/bootstrap/bootstrap-progressbar.min.js"></script>
	<!-- this page -->
	<script src="${ctx}/assets/js/staff/staff_book_search.js"></script>
	<script>
		<c:forEach var="search" items="${requestScope.searchs}" begin="0" end="0">
			$("div.top_search").children("div").children("input").attr("placeholder","大家都在搜:${search.searchKey}");
		</c:forEach>

		function bigImage(src) {
			var $modal = $("div.bigImage");
			var imageSrc = src;

			$modal.find("img").attr("src",imageSrc);
		}


		function matchKey(key) {
			$.ajax({
				type:'POST',//请求类型
				url:'getSearchsByKey',//请求地址
				contentType: 'application/json;',//发送信息至服务器时内容编码类型
				data:JSON.stringify({
					"searchKey":key,
				}),
				dataType:'JSON',/*预期服务器返回的数据类型*/
				success:function (json) {//成功获取到后台返回的值后，对后台返回的值做相应的一系列操作
					var $liObj;
					var searchs = json.data.searchs;
					for(var i = 0;i < searchs.length && i < 10;++i){
						$liObj = $("<li><a href='#' onclick='toSearchByMatchKey(this)'></a></li>");
						$liObj.children("a").text(searchs[i].searchKey);
						$("#matchSearch").append($liObj.clone());
					}
				},
				error: function(XMLHttpRequest, textStatus, errorThrown) {
				},
				fail:function () { //如果在传输过程失败了：调用fail中对应的匿名函数(可选)
				},
				cache:true,
			});
		}
	</script>
</tag:javascript>
</html>

<!-- start:bigImage -->
<div class="modal fade bigImage" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog modal-sm">
		<div class="modal-content">
			<img src="" width="300px" height="300px">
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			</div>

		</div>
	</div>
</div>
<!-- end:bigImage -->